<template>
  <div>
    <form class="form-inline">
      <div class="form-group sxt-off ">
          <label for="exampleInputtext" class="sxt-on">设备登录名：</label>
          <input type="text" class="form-control" id="exampleInputtext" v-model="loginid">
        </div>
        <div class="form-group sxt-off">
          <label for="exampleInputpassword" class="sxt-on">设备登录密码：</label>
          <input type="password" class="form-control" id="exampleInputpassword" v-model="loginpwd">
        </div>
        <div class="form-group">
          <button type="button" @click="loadData" class="btn btn-default sxt-on">扫描</button>
        </div>
        
        <div class="form-group tjsb-sele">
          <label class="control-label sxt-on">录制视频流：</label>  
            <select class="form-contro">
            <option value="0">主楼三楼机密组</option>
            <option value="1">主楼三楼机密组</option>
            <option value="1">主楼三楼机密组</option>
            <option value="1">无</option>
        </select>
        </div>
    </form>
    <div class="row sxt-tab">
      <div class="table-responsive col-md-3 sxt-tab-one">
          <table class="table table-mystyle jsgl-tab-one-tab" id="tblDevice">
                <thead>
                  <tr>
                <th width="5%" class="tb-td "><input type="checkbox" name=""></th>
                <th width="20%">全选</th>
                  </tr>
                </thead>
            <tbody> 
              <tr v-for="item in devinfoList">
                <td width="5%" class="tb-td "><input type="checkbox" name="" v-model="selIps" :value="item.ip"></td>
                <td width="20%">{{item.ip}}</td>
              </tr>
            </tbody>
          </table>
      </div>
        <div class="col-md-9 sxt-tab-two">
          <ul class="sxt-ul">
            <template v-for="item in selArray">
              <li>{{item.MainRTSP}}</li>
              <li>{{item.AuxRTSP}}</li>
            </template>
          </ul>    
        </div>
    </div>
    <div class="form-group xst-btn">
        <button type="submit" class="btn btn-default sxt-on">返回</button>
        <button type="submit" class="btn btn-default sxt-on">确定</button>
        <button type="submit" class="btn btn-default sxt-on">摄像头预览</button>
    </div>   
  </div>
</template>

<script>
  export default {
    name: 'AddCameraOnvif',
    data: function () {
      return {
        loginid: '',
        loginpwd: '',
        devinfoList: [],
        selIps: []
      }
    },
    created: function () {
      console.log('AddCameraOnvif created')
    },
    methods: {
      loadData: function () {
        this.selIps = []
        this.$http.post('/api/hedacmdreq', {method: 'OnvifSearch', loginid: this.loginid, loginpwd: this.loginpwd}).then(response => {
          var body = response.data.HedaACK.Body
          if (body.retCode === '0') {
            this.devinfoList = body.devinfolist
          }
        })
      }
    },
    computed: {
      selArray: function () {   // 已选数据
        var selArray = []
        for (var i in this.selIps) {
          var item = this.selIps[i]
          var selObj = this.devinfoList.find(function (o) {
            return o.ip === item
          })
          if (selObj) {
            selArray.push(selObj)
          }
        }
        return selArray
      }
    }
  }
</script>
